<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>树形结构展示</title>
    <link th:href="@{/zTree/css/zTreeStyle/zTreeStyle.css}" type="text/css" rel="stylesheet">
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/zTree/jquery.ztree.all.min.js}"></script>
    <script th:src="@{/zTree/jquery.ztree.core.min.js}"></script>
</head>
<body>
<script type="text/javascript">
    //zTree的属性设置
    var setting={
        callback:{
            onClick:zTreeOnCheck //绑定单击事件
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "itemtypecode",//节点id名
                pIdKey: "upcode"//父节点id名
            },
            key : {
                name : "itemname" //网页上显示出节点的名称
            },
        }
    };

    var zTreeNodes=[];//数据来源于控制层可不要这个
    //ready()延迟加载初始化树。等页面其它都加载完了再加载
    var zTreeObj;
    $(document).ready(function() {
        //第一个参数为数据源url，第二个为回调函数，data为回调的数据。
        $.get("[[@{/tree/showtree}]]", function(data) {
            zTreeObj = $.fn.zTree.init($("#tree"), setting, data);//初始化树。第一个参数为树的容器，第二个为属性配置，第三个为回调的数据
            zTreeObj.expandAll(true);//是否展开所有树
        })
    })
    //单击事件
    function zTreeOnCheck(event, treeId, treeNode) {
        window.open("/itemtype/testlist?itemcode="+treeNode.itemtypecode+"&itemname="+treeNode.itemname,"itemtypeRight");
        alert("名字为："+treeNode.itemname+"编号为："+treeNode.itemtypecode+"父节点为："+treeNode.upcode);//弹出节点名字

        // window.parent.itemtypeRight.href=""
    }
</script>
<body>
<div>
    <ul id="tree" class="ztree" style="width:230px; overflow:auto;">

    </ul>
</div>

</body>
</html>